/** @format */

import { Link, useNavigate } from 'react-router-dom'
import SvgIcon from '@/components/SvgIcon/SvgIcon'
import styles from './Profile.module.scss'
import { useLayoutEffect, useRef } from 'react'
import { getUserInfoAsync } from '@/store/slice/profile'
import defaultAvatar from '@/assets/images/user_head.jpg'
import useApiData from '@/hooks/useApiData'

const Profile = () => {
  const navigate = useNavigate()
  const { user: userInfo } = useApiData(getUserInfoAsync, 'profile')
  const imgRef = useRef<HTMLImageElement | null>(null)
  useLayoutEffect(() => {
    if (imgRef.current) {
      imgRef.current.addEventListener('error', function (): void {
        this.setAttribute('src', defaultAvatar)
      })
    }
  }, [])
  return (
    <div className={styles.root}>
      <div className='profile'>
        {/* 个人信息 */}
        <div className='user-info'>
          <div className='avatar'>
            <img
              ref={imgRef}
              src={userInfo.photo}
              alt='avatar'
            />
          </div>
          <div className='user-name'>{userInfo.name}</div>
          <Link to='/profile/setting'>
            个人信息 <SvgIcon name='btn_right' />
          </Link>
        </div>

        {/* 今日阅读 */}
        <div className='read-info'>
          <SvgIcon name='btn_readingtime' />
          今日阅读
          <span>10</span>
          分钟
        </div>

        {/* 动态 - 对应的这一行 */}
        <div className='count-list'>
          <div className='count-item'>
            <p>{userInfo.art_count}</p>
            <p>动态</p>
          </div>
          <div className='count-item'>
            <p>{userInfo.follow_count}</p>
            <p>关注</p>
          </div>
          <div className='count-item'>
            <p>{userInfo.fans_count}</p>
            <p>粉丝</p>
          </div>
          <div className='count-item'>
            <p>{userInfo.like_count}</p>
            <p>被赞</p>
          </div>
        </div>

        {/* 消息通知 - 对应的这一行 */}
        <div className='user-links'>
          <div className='link-item'>
            <SvgIcon name='btn_mymessages' />
            <div>消息通知</div>
          </div>
          <div className='link-item'>
            <SvgIcon name='btn_mycollect' />
            <div>收藏</div>
          </div>
          <div className='link-item'>
            <SvgIcon name='btn_history1' />
            <div>浏览历史</div>
          </div>
          <div className='link-item'>
            <SvgIcon name='btn_myworks' />
            <div>我的作品</div>
          </div>
        </div>
      </div>

      {/* 更多服务 */}
      <div className='more-service'>
        <h3>更多服务</h3>
        <div className='service-list'>
          <div className='service-item'>
            <SvgIcon name='btn_feedback' />
            <div>用户反馈</div>
          </div>
          <div
            className='service-item'
            onClick={() => navigate('/chat')}>
            <SvgIcon name='btn_xiaozhitongxue' />
            <div>小智同学</div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Profile
